import React, { Component } from "react";
import "../../styles/home.css";
import { connect } from "react-redux";
import { actions } from "./_index";

class index extends Component {
  constructor() {
    super();
    this.state = {
      isShow: "home_btn",
      own: {
        name: "",
        age: "",
        tel: "",
        address: "",
      },
      list: [],
      index: "",
    };
    this.setVal = this.setVal.bind(this);
    this.add = this.add.bind(this);
    this.del = this.del.bind(this);
  }
  setVal({ target }) {
    const { name, value } = target;
    const { own } = this.state;
    own[name] = value;
    this.setState({
      own,
    });
  }
  quxiao() {
    this.setState({
      own: {
        name: "",
        age: "",
        tel: "",
        address: "",
      },
      index: "",
    });
    if (this.state.list.length > 0) {
      this.setShow("home_list");
    } else {
      this.setShow("home_btn");
    }
  }
  add() {
    const { list, own, index } = this.state;
    const { getData } = this.props;
    if (!own.name || !own.age || !own.tel || !own.address) {
      return alert("不可以为空");
    }
    if (index !== "") {
      if (index >= 0) {
        list[index] = own;
      }
    } else {
      list.push(own);
    }
    this.setShow("home_list");
    getData("添加", list);
    this.setState({
      list,
      own: {
        name: "",
        age: "",
        tel: "",
        address: "",
      },
      index: "",
    });
  }
  componentDidMount() {
    const { list } = this.props.formData.action;
    if (list.length > 0) {
      this.setState({
        list,
      });
      this.setShow("home_list");
    } else {
      const { getData } = this.props;
      getData("初始", []);
    }
  }
  edit(item, index) {
    this.setShow("home_form");
    this.setState({
      own: item,
      index,
    });
  }
  del(index) {
    const { list } = this.state;
    const { getData, formData } = this.props;
    list.splice(index, 1);
    getData("删除", list);
    this.setState({
      list,
    });
    if (list.length === 0) {
      this.setShow("home_btn");
    }
  }
  lists() {
    // const { list } = this.state;
    const { list } = this.props.formData.action;
    return list.map((val, index) => {
      return (
        <li key={index}>
          <p>
            <span>姓名：{val.name}</span>
            <span>年龄：{val.age}</span>
            <span>手机：{val.tel}</span>
            <span>地址：{val.address}</span>
          </p>
          <p>
            <span
              onClick={() => {
                this.edit(val, index);
              }}
            >
              编辑
            </span>
            <span
              onClick={() => {
                this.del(index);
              }}
            >
              删除
            </span>
          </p>
        </li>
      );
    });
  }
  setShow(isShow) {
    this.setState({
      isShow,
    });
  }
  render() {
    const { isShow } = this.state;
    const { name, age, tel, address } = this.state.own;
    return (
      <React.Fragment>
        <div className={`home_box ${isShow}`}>
          <div className="add">
            <input
              type="button"
              value="添加数据"
              onClick={() => this.setShow("home_form")}
            />
          </div>
          <div className="form">
            <label>
              <input
                type="text"
                placeholder="姓名"
                name="name"
                value={name || ""}
                onChange={this.setVal}
              />
            </label>
            <label>
              <input
                type="text"
                placeholder="年龄"
                value={age || ""}
                name="age"
                onChange={this.setVal}
              />
            </label>
            <label>
              <input
                type="text"
                placeholder="手机"
                value={tel || ""}
                name="tel"
                onChange={this.setVal}
              />
            </label>
            <label>
              <input
                type="text"
                placeholder="地址"
                value={address || ""}
                name="address"
                onChange={this.setVal}
              />
            </label>
            <label>
              <input
                type="button"
                value="保存"
                onClick={() => this.add()}
                className="form_btn"
              />
              <input
                type="button"
                value="取消"
                onClick={() => this.quxiao()}
                className="form_btn"
              />
            </label>
          </div>
          <ul className="form_list">
            <input
              type="button"
              value="添加新数据"
              onClick={() => this.setShow("home_form")}
            />
            {this.lists()}
          </ul>
        </div>
      </React.Fragment>
    );
  }
}
function mapStateToProps(state) {
  return {
    formData: state.form,
  };
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getData: (text, data) => dispatch(actions.getData(text, data)),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(index);
